<template>

    <div class="content flex">
        <!-- 左侧 -->
        <div class="leftBox">
            <div class="titleBox between mb-12">
                <p class="text01">已安全生产 <span class="numStyle" v-for="(num,index) in totalData.dayNum" :key="index">{{num}}</span> 天</p>
                <div class="yearData">
                    <!-- <el-select class="w-10 m-2 mr-8" @change="changeyear" v-model="totalData.tableObj.year" clearable  placeholder="年份">
                        <el-option
                            v-for="item in totalData.tableObj.yearlist"
                            :key="item.value"
                            :label="item.label+'年'"
                            :value="item.value"
                            />
                    </el-select> -->
                    <el-date-picker
                        @change="changeyear"
                        v-model="totalData.tableObj.year"
                        type="year"
                        placeholder="年份"
                        />
                </div>
            </div>
            <!-- 第一排 -->
            <div class="first flex">
                <!-- 年度总目标及完成情况 -->
                <div class="bgcolor mr-12 h100 w50 p12" >
                    <p class="text01 mb-12">年度总目标及完成情况</p>
                    <div class="flex w100">
                        <div class="wcalc02 flex">
                            <div class="bgcolor01 p12 w50 mr-8">
                                <p class="text04">总装卸任务量<el-icon><QuestionFilled /></el-icon></p>
                                <p class="flex mt-12"><span class="text03">{{totalData.indexData.totalLoadingUnloadingTasks}}</span> <span class="text02">吨</span></p>
                                <p class="flex mt-12"><span class="text05">同比</span>  <span class="text06">{{totalData.indexData.totalLoadingUnloadingTasksYoy}}</span> </p>
                            </div>
                            <div class="bgcolor01 p12 w50 mr-8">
                                <p class="text04">已完成作业次数及装卸量<el-icon><QuestionFilled /></el-icon></p>
                                <p class="flex mt-12">
                                    <span class="text03">{{totalData.indexData.numberCompletedAssignments}}</span> <span class="text02 mr-12">次</span>
                                    <span class="text03">{{totalData.indexData.volumeGoodsLoadedUnloaded}}</span> <span class="text02">吨</span>
                                </p>
                                <p class="flex mt-12"><span class="text05 mr-12">同比</span><span class="text06 mr-12">{{totalData.indexData.numberCompletedAssignmentsYoy}}</span> <span class="text06">{{totalData.indexData.volumeGoodsLoadedUnloadedYoy}}</span></p>
                            </div>
                        </div>
                        
                        <!-- <div id="annualtarget" class="p12">
                        </div> -->
                        <el-progress id="annualtarget"  type="circle" :percentage="totalData.indexData.annualOverallGoalCompletionRate">
                            <template #default="{ percentage }">
                                <span class="percentage-value">{{ percentage }}%</span>
                                <span class="percentage-label">完成率</span>
                            </template>
                        </el-progress>
                    </div>
                </div>
                <div class=" h100 w50 flex" >
                    <!-- 年度总收入 -->
                    <div class="w50 bgcolor h100 mr-12 annualrevenue p12">
                        <p class="text01 mb-12">年度总目标及完成情况</p>
                        <div class="bgcolor01 p12 w100 ">
                            <p class="text04">年度总收入<el-icon><QuestionFilled /></el-icon></p>
                            <p class="flex mt-12"><span class="text03">{{totalData.indexData.annualGrossIncome}}</span> <span class="text02">元</span></p>
                            <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.annualGrossIncomeYoy}}</span></p>
                        </div>
                    </div>
                    <!-- 年度能耗总支出 -->
                    <div class="w50 bgcolor h100 p12">
                        <p class="text01 mb-12">年度能耗总支出</p>
                        <div class="flex">
                            <div class="bgcolor01 p12 wcalc01 mr-8">
                                <p class="text04">能耗总支出<el-icon><QuestionFilled /></el-icon></p>
                                <p class="flex mt-12"><span class="text03">{{totalData.indexData.totalEnergyConsumptionExpenditure}}</span> <span class="text02">元</span></p>
                                <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.totalEnergyConsumptionExpenditureYoy}}</span></p>
                            </div>
                            <div id="energyexpenditure">
                            </div>
                        </div>
                        

                    </div>
                </div>
            </div>
            <!-- 第二排 -->
            <div class="second flex mt-12">
                <!-- 年度收入与能耗支出趋势分析 -->
                <div class="bgcolor mr-12 h100 w50  p12" >
                    <p class="text01 mb-12">年度收入与能耗支出趋势分析</p>
                    <div id="annualexpenditure"></div>
                </div>
                <div class=" h100 w50 flex" >
                    <div class="w50 p12 bgcolor h100 mr-12">
                        <p class="text01 mb-12">年度进出港统计</p>
                        <!-- 年度进出港统计 -->
                        <div class=" importandexportstatistics">
                            <div class="bgcolor01 p12 w100 ">
                                <p class="text04">进港人次<el-icon><QuestionFilled /></el-icon></p>
                                <p class="flex mt-12"><span class="text03">{{totalData.indexData.annualInboundArrivals}}</span> <span class="text02">人次</span></p>
                                <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.annualInboundArrivalsYoy}}</span></p>
                            </div>
                            <div class="bgcolor01 p12 w100 mt-4">
                                <p class="text04">进港单位<el-icon><QuestionFilled /></el-icon></p>
                                <p class="flex mt-12"><span class="text03">{{totalData.indexData.annualEntryUnit}}</span> <span class="text02">家</span></p>
                                <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.annualEntryUnitYoy}}</span></p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 年度巡检情况统计 -->
                    <div class="w50 bgcolor h100  p12">
                        <p class="text01 mb-12">年度巡检情况统计</p>
                        <div class="w100">
                            <div class="flex">
                                <div class="bgcolor01 p12 w50 mr-8">
                                    <p class="text04">巡检总次数<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.totalNumberInspections}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.totalNumberInspectionsYoy}}</span></p>
                                </div>
                                <div class="bgcolor01 p12 w50 ">
                                    <p class="text04">巡检异常次数<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.numberAbnormalInspections}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.numberAbnormalInspectionsYoy}}</span></p>
                                </div>
                            </div>
                            <!-- <div id="inspection" class="mt-8" ></div> -->
                            <el-progress class="flexcolumn mt-12" id="inspection"  type="circle" :percentage="totalData.indexData.abnormalRate">
                            <template #default="{ percentage }">
                                <span class="percentage-value">{{ percentage }}%</span>
                                <span class="percentage-label">异常率</span>
                            </template>
                        </el-progress>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第三排 -->
            <div class="third flex mt-12">
                <!-- 年度各任务统计 -->
                <div class="bgcolor mr-12 h100 w50 eachtask p12" >
                    <p class="text01 mb-12">年度各任务统计</p>
                    <div class="w100">
                            <div class="flex">
                                <div class="bgcolor01 p12 w25 mr-8">
                                    <p class="text04">隐患<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.hiddenDanger}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.hiddenDangerYoy}}</span></p>
                                </div>
                                <div class="bgcolor01 p12 w25 mr-8">
                                    <p class="text04">保养<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.maintain}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.maintainYoy}}</span></p>
                                </div>
                                <div class="bgcolor01 p12 w25 mr-8">
                                    <p class="text04">维修<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.maintenance}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.maintenanceYoy}}</span></p>
                                </div>
                                <div class="bgcolor01 p12 w25">
                                    <p class="text04">特殊作业<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.specialAssignments}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.specialAssignmentsYoy}}</span></p>
                                </div>
                            </div>
                    </div>
                </div>
                <!-- 年度培训学习演练统计 -->
                <div class="bgcolor h100 w50 drill p12" >
                    <p class="text01 mb-12">年度培训学习演练统计</p>
                    <div class="w100">
                            <div class="flex">
                                <div class="bgcolor01 p12 w33 mr-8">
                                    <p class="text04">培训次数<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.trainingFrequency}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.trainingFrequencyYoy}}</span></p>
                                </div>
                                <div class="bgcolor01 p12 w33 mr-8">
                                    <p class="text04">考试次数<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.examFrequency}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.examFrequencyYoy}}</span></p>
                                </div>
                                <div class="bgcolor01 p12 w33 ">
                                    <p class="text04">预案演练<el-icon><QuestionFilled /></el-icon></p>
                                    <p class="flex mt-12"><span class="text03">{{totalData.indexData.planDrill}}</span> <span class="text02">次</span></p>
                                    <p class="flex mt-12"><span class="text05">同比</span> <span class="text06">{{totalData.indexData.planDrillYoy}}</span></p>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            <!-- 第四排 -->
            <div class="forth flex mt-12">
                <div class=" h100 w50 flex mr-12" >
                    <!-- 年度隐患占比 --> 
                    <div class="w50 bgcolor h100 mr-12  p12">
                        <p class="text01 mb-12">年度培训学习演练统计</p>
                        <div id="hiddendanger"></div>
                    </div>
                    <!-- 年度特殊作业占比 -->
                    <div class="w50 bgcolor h100 p12">
                        <p class="text01 mb-12">年度特殊作业占比</p>
                        <div id="assignmentproportion"></div>
                    </div>
                </div>
                <div class=" h100 w50 flex" >
                    <!-- 培训主题占比 --> 
                    <div class="w50 bgcolor h100 mr-12 p12">
                        <p class="text01 mb-12">培训主题占比</p>
                        <div id="themeproportion"></div>
                    </div>
                    <!-- 考试科目占比 -->
                    <div class="w50 bgcolor h100 p12">
                        <p class="text01 mb-12">考试科目占比</p>
                        <div id="accountproportion"></div>
                    </div>
                </div>
            </div>
            <!-- 第五排 -->
            <div class="fifth flex mt-12">
                <!-- 年度任务月趋势 -->
                <div class="bgcolor mr-12 h100 w50 p12" >
                    <p class="text01 mb-12">年度任务月趋势</p>
                    <div id="taskmonthlytrend"></div>
                </div>
                <!-- 年度培训学习演练月趋势 -->
                <div class="bgcolor h100 w50 p12" >
                    <p class="text01 mb-12">年度培训学习演练月趋势</p>
                    <div id="exercisesmonthlytrend"></div>
                </div>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="rightBox">
            <!-- 实时天气信息 -->
            <div class="w100 bgcolor weatherinformation p12">
                <p class="text01 mb-12">实时天气信息</p>
                <div class="dis_center w100">
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="iconStyle"><i class="iconfont icon-heat"></i></p>
                        <p class="mt-4 mb-4"><span class="text03">{{totalData.realTimeWeatherInformation.temperature}}</span><span class="text02">℃</span></p>
                        <p class="text04">温度</p>
                    </div>
                    <el-divider direction="vertical" />
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="iconStyle"><i class="iconfont icon-tide"></i></p>
                        <p class="mt-4 mb-4"><span class="text03">{{totalData.realTimeWeatherInformation.tide}}</span><span class="text02">米</span></p>
                        <p class="text04">潮汐</p>
                    </div>
                    <el-divider direction="vertical" />
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="iconStyle"><i class="iconfont icon-w-direction"></i></p>
                        <p class="mt-4 mb-4"><span class="text03">{{totalData.realTimeWeatherInformation.windDirection}}</span><span class="text02">度</span></p>
                        <p class="text04">风向</p>
                    </div>
                    <el-divider direction="vertical" />
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="iconStyle"><i class="iconfont icon-w-power"></i></p>
                        <p class="mt-4 mb-4"><span class="text03">{{totalData.realTimeWeatherInformation.windPower}}</span><span class="text02">米/秒</span></p>
                        <p class="text04">风力</p>
                    </div>
                </div>
            </div>
            <!-- 公告 -->
            <div class="w100 bgcolor notice mt-12 p12">
                <p class="text01 mb-12">公告</p>
                <p class="text08">{{totalData.sysNotice.title}}</p>
                <p class="text09 mt-12">发布单位：{{totalData.sysNotice.publisherName}}</p>
                <p class="text09 mt-12">发布时间：{{totalData.sysNotice.publisherTime}}</p>
                <div class="text09 mt-12 flex"><span class="noticeTitle">公告内容：</span><p class="text09 noticeContent">{{totalData.sysNotice.context}}</p></div>
                <p class="text10 cursor mt-12" @click="lookDetail(totalData.sysNotice)">查看详情</p>
            </div>
            <!-- 当前设备数统计 -->
            <div class="w100 bgcolor devicesnum mt-12 p12">
                <p class="text01 mb-12">当前设备数统计</p>
                <div class="dis_center w100">
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="mt-4 mb-4"><span class="text03">{{ totalData.equipmentCountStatistics.productionEquipment}}</span></p>
                        <p class="text04">生产设备</p>
                    </div>
                    <el-divider direction="vertical" />
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="mt-4 mb-4"><span class="text03">{{ totalData.equipmentCountStatistics.fireFightingEquipment}}</span></p>
                        <p class="text04">消防设备</p>
                    </div>
                    <el-divider direction="vertical" />
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="mt-4 mb-4"><span class="text03">{{ totalData.equipmentCountStatistics.industrialEquipment}}</span></p>
                        <p class="text04">工属具</p>
                    </div>
                    <el-divider direction="vertical" />
                    <div class="weatherInfo w25 flexcolumn">
                        <p class="mt-4 mb-4"><span class="text03">{{ totalData.equipmentCountStatistics.spareParts}}</span></p>
                        <p class="text04">备品备件</p>
                    </div>
                </div>
            </div>
            <!-- 当前在用工具列表 -->
            <div class="w100 bgcolor toolslist mt-12 p12">
                <p class="text01 mb-12">当前在用工具列表</p>
                <el-table
                    :data="totalData.industrialEquipments"
                    :header-cell-style="{ background: 'rgba(242,245,250,1)'}"     
                    border
                    style="width: 100%"
                > 
                    <el-table-column prop="name"   label="工属具名称" min-width="10%" />
                    <el-table-column prop="storageLocationLibraryName"   label="存放位置" min-width="10%" />
                    <el-table-column prop="recipient"   label="领用人" min-width="10%" />
                </el-table>
            </div>
            <!-- 当前缺少的应急物资 -->
            <div class="w100 bgcolor emergencysupplies mt-12 p12">
                <p class="text01 mb-12">当前缺少的应急物资</p>
                <el-table
                    :data="totalData.necessaryMaterials"
                    :header-cell-style="{ background: 'rgba(242,245,250,1)'}"     
                    border
                    style="width: 100%"
                > 
                    <el-table-column prop="name"   label="应急物资名称" min-width="15%" />
                    <el-table-column prop="typeName"   label="分类" min-width="10%" />
                    <el-table-column prop="missingQuantity"   label="缺少数量" min-width="10%" />
                    <el-table-column prop="measurementUnit"   label="单位" min-width="10%" />
                </el-table>
            </div>
        </div>
        <Detail
        v-model="totalData.dialog.dialoDetailVisible"
        :showDetail="totalData.dialog.dialoDetailVisible"
        :dialogTableValue="totalData.dialog.tableData"
    ></Detail>
    </div>
        
</template>

<script setup>
import Detail from "../system/notice/detail.vue"
import { reactive,onBeforeMount,getCurrentInstance,onMounted} from "vue";
import {getIndexData, realTimeData as realTimeData} from '@/api/index';
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
const { proxy } = getCurrentInstance();
import store from '@/store'
let indexData = reactive({});
let totalData =  reactive({
    dialog:{
        dialoDetailVisible:false,
        tableData:[]
    },
    dayNum:'',
    tableObj: {
        year:'2024',
        yearlist:[{
            label:'2024',
            value:'2024'
        },{
            label:'2025',
            value:'2025'
        }],
    },
    indexData:{},
    realTimeData:{},
    sysNotice:{}, //公告
    realTimeWeatherInformation:{}, //天气信息
    equipmentCountStatistics:{}, //设备数统计
    industrialEquipments:[],//当前在用工具列表
    necessaryMaterials:[],//当前缺少的应急物资
    tableData:[{
        name:'111',
        code:'111',
        level:'111'
    },{
        name:'111',
        code:'111',
        level:'111'
    },{
        name:'111',
        code:'111',
        level:'111'
    },{
        name:'111',
        code:'111',
        level:'111'
    },{
        name:'111',
        code:'111',
        level:'111'
    },{
        name:'111',
        code:'111',
        level:'111'
    },{
        name:'111',
        code:'111',
        level:'111'
    },{
        name:'111',
        code:'111',
        level:'111'
    }]
})
const changedayNum = (dayNum)=>{
    totalData.dayNum = Array.from(dayNum+'');
    console.log(totalData.dayNum)
}
//首页右侧数据
const realTimeDataFun = ()=>{
    realTimeData().then((res) =>{
        if(res.code == 200){
            totalData.realTimeData = res.body;
            totalData.realTimeWeatherInformation = totalData.realTimeData.realTimeWeatherInformation;
            totalData.sysNotice = totalData.realTimeData.sysNotice;
            totalData.equipmentCountStatistics = totalData.realTimeData.equipmentCountStatistics;
            totalData.industrialEquipments = totalData.realTimeData.industrialEquipments;
            totalData.necessaryMaterials = totalData.realTimeData.necessaryMaterials;
        }else{
            ElNotification({
                title: '提示',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
}
const getIndexDataFun = (year) => {
    getIndexData(year).then((res)=>{
        if(res.code == 200){
                totalData.indexData = res.body;
                changedayNum(totalData.indexData.safeProductionDays)
                initenergyexpenditure()
                initannualexpenditure()
                inithiddendanger()
                initassignmentproportion()
                initthemeproportion()
                initaccountproportion()
                inittaskmonthlytrend()
                initexercisesmonthlytrend()
        }else{
            ElNotification({
                title: '提示',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
}
onBeforeMount(()=>{
})
onMounted(()=>{
    
})
const changeyear = (val) =>{
    const date = new Date(val);
    let year =  date.getFullYear();
    getIndexDataFun(year)
}
//公告详情
const lookDetail = (data) => {
    totalData.dialog.dialoDetailVisible = true;
    totalData.dialog.tableData = data;
}
//年度能耗总支出
const initenergyexpenditure = () => {
    if (proxy.$echarts.getInstanceByDom(document.getElementById("energyexpenditure"))) {
        proxy.$echarts.dispose(document.getElementById("energyexpenditure"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("energyexpenditure"), "purple-passion");
    const option = {
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 12,
                    fontWeight: 'bold',
                    formatter(param) {
                        // correct the percentage
                        return param.name + ' (' + param.percent + '%)';
                    }
                }
            },
            labelLine: {
                show: false
            },
            data: totalData.indexData.totalEnergyConsumptionExpenditurePei
            }
        ]
    };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//年度收入与能耗支出趋势分析
const initannualexpenditure = ()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("annualexpenditure"))) {
        proxy.$echarts.dispose(document.getElementById("annualexpenditure"));
    }
    // console.log(document.getElementById("annualexpenditure"))
    let classificationBox =  proxy.$echarts.init(document.getElementById("annualexpenditure"), "purple-passion");
    let obj = totalData.indexData.annualRevenueEnergyExpenditure
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {top: 0,right: 10},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            name: '元',
        },
        xAxis: {
            type: 'category',
            data: obj.xaxisData
        },
        series: [
            {
            name: '总收入',
            type: 'bar',
            barMaxWidth:5,
            data: obj.incomeData
            },
            {
            name: '能耗总支出',
            type: 'bar',
            barMaxWidth:5,
            data: obj.expenditureData
            }
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//年度培训学习演练统计
const inithiddendanger =()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("hiddendanger"))) {
        proxy.$echarts.dispose(document.getElementById("hiddendanger"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("hiddendanger"), "purple-passion");
    const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            // data: ['特级动火作业安全作业票 (DHZY)','一级动火作业安全作业票 (DHZY)','二级动火作业安全作业票 (DHZY)','受限空间安全作业票 (SXKJ)','盲板抽堵安全作业票(MBCD)','一级高处作业安全作业票 (YJGC)']
        },
        series: [
            {
            name: '年度培训学习演练统计',
            type: 'pie',
            center: ['30%', '50%'], //饼图位置
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },

            labelLine: {
                show: false
            },
            data: totalData.indexData.annualProportionHiddenDangers
            }
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//年度特殊作业占比
const initassignmentproportion = ()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("assignmentproportion"))) {
        proxy.$echarts.dispose(document.getElementById("assignmentproportion"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("assignmentproportion"), "purple-passion");
    const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            // data: ['特级动火作业安全作业票 (DHZY)','一级动火作业安全作业票 (DHZY)','二级动火作业安全作业票 (DHZY)','受限空间安全作业票 (SXKJ)','盲板抽堵安全作业票(MBCD)','一级高处作业安全作业票 (YJGC)']
        },
        series: [
            {
            name: '年度特殊作业占比',
            type: 'pie',
            center: ['30%', '50%'], //饼图位置
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },

            labelLine: {
                show: false
            },
            data: totalData.indexData.annualProportionSpecialAssignments
            }
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//培训主题占比
const initthemeproportion =() => {
    if (proxy.$echarts.getInstanceByDom(document.getElementById("themeproportion"))) {
        proxy.$echarts.dispose(document.getElementById("themeproportion"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("themeproportion"), "purple-passion");
    const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            // data: ['特级动火作业安全作业票 (DHZY)','一级动火作业安全作业票 (DHZY)','二级动火作业安全作业票 (DHZY)','受限空间安全作业票 (SXKJ)','盲板抽堵安全作业票(MBCD)','一级高处作业安全作业票 (YJGC)']
        },
        series: [
            {
            name: '培训主题占比',
            type: 'pie',
            center: ['30%', '50%'], //饼图位置
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },

            labelLine: {
                show: false
            },
            data: totalData.indexData.proportionTrainingTopics
            }
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//考试科目占比
const initaccountproportion =()=>{
     if (proxy.$echarts.getInstanceByDom(document.getElementById("accountproportion"))) {
        proxy.$echarts.dispose(document.getElementById("accountproportion"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("accountproportion"), "purple-passion");
    const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            // data: ['特级动火作业安全作业票 (DHZY)','一级动火作业安全作业票 (DHZY)','二级动火作业安全作业票 (DHZY)','受限空间安全作业票 (SXKJ)','盲板抽堵安全作业票(MBCD)','一级高处作业安全作业票 (YJGC)']
        },
        series: [
            {
            name: '考试科目占比',
            type: 'pie',
            center: ['30%', '50%'], //饼图位置
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },

            labelLine: {
                show: false
            },
            data: totalData.indexData.examSubjectProportion
            }
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//年度任务月趋势
const inittaskmonthlytrend = ()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("taskmonthlytrend"))) {
        proxy.$echarts.dispose(document.getElementById("taskmonthlytrend"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("taskmonthlytrend"), "purple-passion");
    let obj = totalData.indexData.annualTaskMonthlyTrend
     const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
            }
        },
            grid: {
                left: '2%',
                right: '2%',
                bottom: '10%',
                containLabel: true
            },
        legend: {
            data: ['隐患', '保养','维修','特殊作业']
        },
        xAxis: [
            {
            type: 'category',
            data: obj.xaxisData,
            axisPointer: {
                type: 'shadow'
            }
            }
        ],
        yAxis: [
            {
            type: 'value',
            name: '次',
            // axisLabel: {
            //   formatter: '{value} 元'
            // }
            },

        ],
        series: [
            {
                name: '隐患',
                type: 'line',
                lineStyle:{
                    color:'#2E83FC'
                },
                itemStyle: {
                    normal: {
                    color:'#2E83FC', //折线点的颜色
                    borderColor: '#2E83FC', 
                    borderWidth: 0, //拐点边框大小
                    },
                },
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 元';
                    }
                },
                data: obj.hiddendangerData
            },
            {
                name: '保养',
                type: 'line',
                lineStyle:{
                    color:'#FF9458'
                },
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 元';
                    }
                },
                data: obj.serviceData
            },
            {
                name: '维修',
                type: 'line',
                lineStyle:{
                    color:'#FFB929'
                },
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 元';
                    }
                },
                data:obj.maintenanceData
            },
            {
                name: '特殊作业',
                type: 'line',
                lineStyle:{
                    color:'#54B831'
                },
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 元';
                    }
                },
                data: obj.taskData
            },
        ]
        };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
//学习演练月趋势
const initexercisesmonthlytrend = ()=>{
    if (proxy.$echarts.getInstanceByDom(document.getElementById("exercisesmonthlytrend"))) {
        proxy.$echarts.dispose(document.getElementById("exercisesmonthlytrend"));
    }
    let classificationBox =  proxy.$echarts.init(document.getElementById("exercisesmonthlytrend"), "purple-passion");
    let obj = totalData.indexData.trainingLearningExercises
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
            }
        },
        // dataZoom: [
        //     {
        //         type: 'inside'
        //     },
        //     {
        //         type: 'slider',
        //         height: 12,
        //         // left: '5%', //左边的距离
        //         // right: '5%',//右边的距离
        //         bottom: '4%',//右边的距离
        //     }
        //     ],
            grid: {
                left: '2%',
                right: '2%',
                bottom: '10%',
                containLabel: true
            },
        legend: {
            data: ['培训', '考试','预案演练']
        },
        xAxis: [
            {
            type: 'category',
            data: obj.xaxisData,
            axisPointer: {
                type: 'shadow'
            }
            }
        ],
        yAxis: [
            {
            type: 'value',
            name: '次',
            // axisLabel: {
            //   formatter: '{value} 元'
            // }
            },

        ],
        series: [
            {
                name: '培训',
                type: 'line',
                lineStyle:{
                    color:'#2E83FC'
                },
                itemStyle: {
                    normal: {
                    color:'#2E83FC', //折线点的颜色
                    borderColor: '#2E83FC', 
                    borderWidth: 0, //拐点边框大小
                    },
                },
                symbolSize: 0,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 元';
                    }
                },
                data: obj.trainData
            },
            {
                name: '考试',
                type: 'line',
                lineStyle:{
                    color:'#FF9458'
                },
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 元';
                    }
                },
                data: obj.examinationData
            },
            {
                name: '预案演练',
                type: 'line',
                lineStyle:{
                    color:'#FFB929'
                },
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' 元';
                    }
                },
                data:obj.plandrillData
            }
        ]
    };
    classificationBox.setOption(option, true);
    window.addEventListener("resize", function () {
        classificationBox.resize();
    });
}
</script>

<style lang="less" scoped>
:deep(.el-table--fit){
  height:calc(100% - 32px);
}
:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}  
.p12{
    padding: 12px;
}
.bgcolor{
    background-color: #ffffff;
}
.bgcolor01{
     background-color: #f2f5fa;
}
.content{
    width: 100%;
    height: calc(100% - 48px);
    overflow-y: auto;
}
.h100{
    height: 100%;
}
.w50{
    width: 50%;
}
.w25{
    width: 25%;
}
.w33{
    width: 33.3%;
}
.leftBox{
    width: calc(100% - 408px);
    height: 100%;
    margin-right: 12px;
    .titleBox{
        width: 100%;
        height: 48px;
        padding: 12px;
        background-color: #ffffff;
        :deep(.el-input){
                    width: 100px;
                }
        .numStyle{
            padding: 4px;
            background-color: #FF9458;
            color: #ffffff;
            text-align: center;
            line-height: 20px;
            margin-right: 2px;
        }
    }

}
.text01{
    color: #1C222C;
    font-weight: 700;
    font-size: 14px;
}
.text04{
    color: #797F89;
}
.text02{
    color: #1C222C;
}
.text03{
    color: #1D2129;
    font-size: 16px;
    font-weight: 700;
}
.text05{
    color: #86909C;
    font-size: 12px;
}
.text06{
    color: #54B831;
    font-size: 12px;
}
.text07{
    color: #F53F3F;
    font-size: 12px;
}
.text08{
    color: #4B515B;
    font-weight: 700;
}
.text09{
    color: #797F89;
}
.text10{
    color: #2E83FC;
}
.noticeTitle{
    width: 70px;
    display: inline-block;
}
.noticeContent{
    width: calc(100% - 70px);
     display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.rightBox{
    width: 396px;
    height: 100%;
}
.iconStyle{
    color: #2E83FC;
    font-size: 18px;
}
.first{
    height: 162px;
    width: 100%;
    #annualtarget{
        width: 98px !important;
        height: 98px !important;
    }
    :deep(.el-progress-circle){
        width: 98px !important;
        height: 98px !important;
    }
    .wcalc02{
        width: calc(100% - 98px);
    }
    #energyexpenditure{
        width: 98px;
    }
    .wcalc01{
        width: calc(100% - 106px);
    }
}
.second{
    height: 268px;
    width: 100%;
    #annualexpenditure{
         width: 100%;
        height: calc(100% - 32px);
    }
    #inspection{
        width: 98px;
        height: 98px;
        margin: 0 auto;
    }
    :deep(.el-progress-circle){
        width: 98px !important;
        height: 98px !important;
    }
}
.third{
    height: 162px;
    width: 100%;

}
.forth{
    height: 224px;
    width: 100%;
    #hiddendanger{
        width: 100%;
        height: calc(100% - 32px);
    }
    #assignmentproportion{
        width: 100%;
        height: calc(100% - 32px);
    }
    #themeproportion{
        width: 100%;
        height: calc(100% - 32px);
    }
    #accountproportion{
        width: 100%;
        height: calc(100% - 32px);
    }
}
.fifth{
    height: 268px;
    width: 100%;
    #taskmonthlytrend{
        height: calc(100% - 32px);
    }
    #exercisesmonthlytrend{
        height: calc(100% - 32px);
    }
}
.weatherinformation{
    height: 138px;
}
.notice{
    height: 238px;
}
.devicesnum{
    height: 114px;
}
.toolslist{
    height: 327px;
}
.emergencysupplies{
    height: 327px;
}
</style>